<script setup lang="ts">
import { ref, onMounted } from 'vue';
const canvasRef = ref();

onMounted(()=>{
  const ctx = canvasRef.value.getContext('2d');
  console.log( canvasRef.value);
  
  ctx.strokeStyle = 'red';
  ctx.strokeRect(10, 10, 50, 50); // 画一个红色边框的正方形

  ctx.fillStyle = 'green';
  ctx.fillRect(60, 60, 100, 100); // 填充一个绿色的正方形

  // 三角形
  ctx.beginPath(); // 开始画路径
  ctx.moveTo(300, 300);
  ctx.lineTo(350, 400);
  ctx.lineTo(250, 400);
  ctx.closePath(); // 结束画路径
  
  ctx.fillStyle = "red";
  ctx.fill(); // 填充路径
  ctx.lineWidth = 3;
  ctx.strokeStyle = "blue";
  ctx.stroke();
});

</script>

<template>
  <canvas width="600" height="600" class="canvas" ref="canvasRef"></canvas>
</template>

<style scoped>
.canvas {
  width: 600px;
  height: 600px;
  border: 1px solid #d3d3d3;
  margin: 20px;
}
</style>